<template>
	<view class="container">
		<view class="content">
			<view class="banner_div">
				<view class="">
					<view v-if="banner.files&&banner.files.indexOf('.mp4')>=0">
						<video :src="$public.imgageUrl(banner.files)" :controls="false" :enable-progress-gesture="false"
							enable-play-gesture class="video" @timeupdate="videoJinDu"></video>
					</view>
					<view class="" v-else>
						<image mode="scaleToFill" class="banner_image" :src="$public.imgageUrl(banner.files)">
						</image>
					</view>
				</view>
			</view>
			<view class="wrap">
				<view class="dtlb_div">
					<view class="dtlb_list" v-for="(item ,index) in dtList" :index="index" :key="index">
						<view class="title">
							第{{index+1}}题、{{item.title}}
						</view>
						<view class="uni-list dtxx-list">
							<checkbox-group v-if="item.typeId==2&&someShow" @change="checkboxChange($event,index)">
								<label class="uni-list-cell uni-list-cell-pd dtnr" v-for="(uitem,uindex) in item.daAnJson"
									:key="uindex">
									<view>
										<checkbox :value="uitem.options" :checked="uitem.checked" color="#DF686A" />
									</view>
									<view>{{uitem.options}}、{{uitem.con}}</view>
								</label>
							</checkbox-group>
							<radio-group v-else-if="someShow" @change="radioChange($event,index)">
								<label class="uni-list-cell uni-list-cell-pd dtnr" v-for="(uitem,uindex) in item.daAnJson"
									:key="uindex">
									<view>
										<radio :value="uitem.options" :checked="uitem.checked" color="#DF686A" />
									</view>
									<view>{{uitem.options}}、{{uitem.con}}</view>
								</label>
							</radio-group>
							<view class="correctAnswer" v-if="showDuiCuo">
								正确答案：{{item.correctAnswer}}
							</view>
							<view class="duicuo" v-if="showDuiCuo">
								<image v-if="!item.isError" src="/static/sj_dt_dui.png" mode="scaleToFill" class="image"></image>
								<image v-else src="/static/sj_dt_cuo.png" mode="scaleToFill" class="image"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn-div wrap">
				<view class="btncss" @click="addDati" v-if="!showDuiCuo">提交</view>
				<view class="btncss" @click="reloadDaTi" v-else>再测一次</view>
			</view>
		</view>
	</view>

</template>

<script>
	/* import {
		mapState
	} from 'vuex'
	import share from '@/store/index.js' */
	export default {
		data() {
			return {
				banner: [],
				dtList: [],
				dtBtnFlag: true,
				someShow: true,
				showDuiCuo: false,
				articleId: 0,
				videoGuoBan: false
			}
		},
		async onLoad(options) {
			if (options.articleId)
				this.articleId = options.articleId
			this.$public.showLoading()
		},
		onShow() {
			this.getArticleDetail();

		},
		methods: {
			videoJinDu(e) {
				console.log("e", e)
				let detail = e.detail
				if (detail.currentTime > (detail.duration / 2) && !this.videoGuoBan && this.banner.subTitle) {
					this.videoGuoBan = true
					this.addAnswer({
						title: "看视频进度过半"
					}, this.banner.subTitle)
				}
			},
			getArticleDetail() {
				let that = this
				this.$public.htmlPost("/api/getArticleDetail", {
					articleId: that.articleId
				}).then((res) => {
					console.log("getArticleDetail res", res)
					let data = res.data;
					if (data.code == 0) {
						that.banner = data.data
						this.getQuestionList();
					}
					uni.hideLoading();
				})
			},
			getBanner() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 14,
					tj: ""
				}).then((res) => {
					console.log("getBanner res", res)
					let data = res.data;
					if (data.code == 0) {
						data.data.forEach(item => {
							item.showVideo = false
						})
						that.banner = data.data
					}
					uni.hideLoading();
				})
			},
			getQuestionList() {
				let that = this
				this.$public.htmlPost("/api/getQuestionList", {
					articleId: this.articleId,
					rand: that.banner.source
				}).then((res) => {
					console.log("getQuestionList res", res)
					let data = res.data;
					if (data.code == 0) {
						data.data.forEach(item => {
							item.daAnJson = JSON.parse(item.chooseAnswer)
						})
						that.dtList = data.data
						// that.dtList.push(data.data[0])
					}
				})
			},
			checkboxChange(e, index) {
				// console.log("e", e)
				// console.log("e", index)
				let that = this
				let detail = e.detail.value
				that.dtList[index].daAnJson.forEach(item => {
					if (that.$_.indexOf(detail, item.options) >= 0) {
						item.checked = true
					} else
						item.checked = false
				})
			},
			radioChange(e, index) {
				// console.log("e", e)
				// console.log("e", index)
				let that = this
				let detail = e.detail.value
				that.dtList[index].daAnJson.forEach(item => {
					if (detail == item.options) {
						item.checked = true
					} else
						item.checked = false
				})
			},
			addDati() {
				console.log("that.dtList", this.dtList)
				let that = this
				if (that.dtBtnFlag) {
					that.dtBtnFlag = false
					let flag = true
					let index = 0;
					that.$_.forEach(that.dtList, function(item, key) {
						// console.log("key", key);
						// console.log("value", value);
						if (!that.$_.some(item.daAnJson, "checked")) {
							that.$api.msg(`第${index+1}题还未答题`);
							flag = false;
							that.dtBtnFlag = true;
							return
						}
						index++
					})
					if (flag) {
						let errorNum = 0;
						let daduijson = []
						that.dtList.forEach(item => {
							let datiData = that.$_.filter(item.daAnJson, function(o) {
								return o.checked;
							});
							// console.log("datiData", datiData);
							let daanstr = datiData.map(o => {
								return o.options
							}).join(",");
							// console.log("daanstr", daanstr);
							if (daanstr != item.correctAnswer) {
								errorNum++
								item.isError = true
							} else {
								daduijson.push({
									questionId: item.questionId,
									daanstr: daanstr
								})
								item.isError = false
							}
						})
						if (daduijson.length > 0)
							that.addAnswer(daduijson, daduijson.length * that.banner.author)
						else {
							uni.showModal({
								title: "答错了！",
								content: `很遗憾，您没有答对的题目`,
								cancelText: "返回列表",
								confirmText: "再测一次",
								success: function(res) {
									if (res.confirm) {
										that.reloadDaTi()
									} else if (res.cancel) {
										// console.log('用户点击再测一次');
										that.$public.navBack()
									}
								}
							})
						}
						/* if (errorNum > 0) {
							uni.showModal({
								title: "答错了！",
								content: `很遗憾，你答错${errorNum}道题目，未能完成本项学习。`,
								cancelText: "再测一次",
								confirmText: "查看错题",
								success: function(res) {
									if (res.confirm) {
										// console.log('用户点击查看错题');
										that.showDuiCuo = true
									} else if (res.cancel) {
										// console.log('用户点击再测一次');
										that.reloadDaTi()
									}
								}
							})
						} else {
							that.addAnswer(daduijson)
						} */
						that.dtBtnFlag = true;
					}
				}
			},
			addAnswer(daduijson, jfNum) {
				let that = this
				this.$public.htmlPost("/api/addAnswer", {
					json: JSON.stringify(daduijson),
					jfNum: jfNum ? jfNum : 20
				}).then(res => {
					if (res.data.code == 0) {
						uni.showModal({
							title: "答对了！",
							content: `恭喜你，奖励你${jfNum}积分，可免费兑换礼品哦！`,
							cancelText: "返回列表",
							confirmText: "去兑换",
							success: function(res) {
								if (res.confirm) {
									// console.log('用户点击确定');
									that.$public.redirectTo("/pages/mall/index")
								} else if (res.cancel) {
									// console.log('用户点击取消');
									that.$public.navBack()
								}
							}
						})
					} else {
						that.$api.msg(res.data.msg)
					}
				})
			},
			reloadDaTi() {
				let that = this
				that.dtList.forEach(item => {
					item.daAnJson.forEach(uitem => {
						uitem.checked = false
					})
				})
				that.someShow = false
				that.$nextTick(function() {
					that.someShow = true
					that.showDuiCuo = false
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		// background-color: #fff;
		background: #fff;


		.wrap {
			padding: $uni-wrap-padding;
		}

		.banner_div {
			margin: 0 0 30rpx;

			.banner_image {
				width: 100%;
				height: 424rpx;
			}

			.video {
				width: 100%;
			}
		}

		.dtlb_div {
			.dtlb_list {
				.dtnr {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;
					font-size: 28rpx;
					color: #666666;
				}

				.title {
					font-size: 32rpx;
					color: #333333;
					margin-bottom: 20rpx;
				}
			}

			.correctAnswer {
				font-size: #333333;
				margin: 24rpx 0;
				color: #029B00;
			}

			.dtxx-list {
				position: relative;

				.duicuo {
					position: absolute;
					right: 0;
					top: 0;

					.image {
						width: 56rpx;
						height: 56rpx;
					}
				}
			}
		}

	}
</style>